<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="12">
        <div class="watch required">
          产品组名称:&nbsp;&nbsp;
          <el-input v-model="name" :disabled="judgeStatus" style="width:40%" size="mini" placeholder="请输入产品名称" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="watch required">
          产品组类型：&nbsp;&nbsp;&nbsp;&nbsp;
          <el-select
            v-model="productType"
            style="width:40% !important"
            :disabled="judgeStatus"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in typeArr"
              :key="item.typeId"
              :value="item.typeId"
              :label="item.typeName"
            />
          </el-select>
        </div>
      </el-col>
    </el-row>
    <!-- key值改变会导致dom重绘失去光标焦点 -->
    <el-row v-for="(item, index) in platArr" :key="index">
      <el-col :span="12">
        <div class="watch required">
          所属平台:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-select
            v-model="item.platformId"
            style="width:40% !important"
            :disabled="judgeStatus"
            placeholder="请选择"
            size="mini"
            @change="getPowerName($event, index)"
          >
            <el-option
              v-for="unit in platformList"
              :key="unit.idVal + unit.powerName"
              :value="unit.idVal"
              :label="unit.powerName"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="watch required">
          运营商产品标识:
          <el-input
            v-model="item.cpproductId"
            :disabled="judgeStatus"
            style="width:40% !important"
            size="mini"
            placeholder="请输入运营商产品标识"
          />
          <div v-show="!judgeStatus" style="display:inline-block">
            <i v-show="index === (platArr.length - 1)" class="el-icon-circle-plus" @click="addLink" />
            <i v-show="index !== 0" class="el-icon-circle-close" @click="reduceLink(index)" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="watch" style="margin-left:10px;">
          <span style="vertical-align: top;">产品组描述:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-input
            v-model="description"
            style="width: 40%;"
            rows="3"
            :disabled="judgeStatus"
            placeholder="请输入产品描述"
            type="textarea"
          />
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getSelectS } from '@/api/product.js'
export default {
  inject: ['platForm'],
  props: {
    clearVal: {
      type: Boolean,
      default: false
    },
    judgeStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      description: '', // 产品描述
      platArr: [
        {
          cpproductId: '', // 平台标识
          platformId: '', // 平台ID
          platformName: '' // 平台名
        }
      ], // 平台组
      platformList: [], // 所属平台数组
      plat: '',
      realStatus: false,
      typeArr: [], // 产品组类型下拉
      productType: '', // 产品组类型
      name: '' // 产品组名称
    }
  },
  watch: {
    clearVal(newVal) {
      if (newVal) {
        this.name = ''
        this.productType = ''
        this.platArr = [
          {
            platformId: '',
            cpproductId: '',
            platformName: ''
          }
        ]
        this.description = ''
      }
    }
  },
  mounted() {
    this.platformList = this.platForm
    this.loadSelect()
  },
  methods: {
    // 得到name
    getPowerName(val, index) {
      // 先判定之前选没选
      var status = false
      this.platArr.some((item, num) => {
        if (num > 0 && this.platArr[num - 1].platformId === val) {
          this.$message({
            message: '平台已选择',
            type: 'error'
          })
          status = true
          this.platArr.splice(index, 1)
          return true
        }
      })
      // 获取name
      if (!status) {
        this.platformList.forEach((item) => {
          if (item.idVal === val) {
            this.platArr[index].platformName = item.powerName
          }
        })
      }
    },
    // 增加平台组
    addLink() {
      for (let i = 0; i < this.platArr.length; i++) {
        if (this.platArr[i].platformName === '' || this.platArr[i].cpproductId === '') {
          this.$message({
            message: '请选择平台和运营商产品标识',
            type: 'error'
          })
          return false
        }
      }
      this.platArr.push({
        cpproductId: '', // 平台标识
        platformId: '', // 平台ID
        platformName: '' // 平台名
      })
    },
    // 删掉一个平台组
    reduceLink(index) {
      this.platArr.splice(index, 1)
    },
    // 加载下拉框
    loadSelect() {
      getSelectS({ functionType: 'productGroupType' }).then((res) => {
        console.log(res)
        if (res.resultCode === '0000') {
          this.typeArr = res.data.list
        }
      })
    }
  }
}
</script>

<style scoped>
.btnFatcher {
  position: relative;
}
#tab-first::after {
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
.watch {
  margin: 10px 0;
}
.bold {
  font-weight: bold;
}
.box-card {
  margin-top: 10px;
}
.required::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
.content {
  width: 95%;
}
#tab-first::before {
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
#tab-second::after {
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-second::before {
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
#tab-third::after {
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-third::before {
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
.el-icon-circle-plus,
.el-icon-circle-close {
  font-size: 20px;
  color: #409eff;
  margin-left: 8px;
  margin-top: 2px;
  cursor: pointer;
  vertical-align: middle;
}
.el-icon-circle-close {
  color: #f56c6c;
  margin-left: 10px;
}
</style>

